<!--
 * @Description: 
 * @Date: 2023-02-24 15:44:16
 * @LastEditors: czp
 * @LastEditTime: 2023-04-23 17:43:29
-->
<template>
	<!-- 照片墙 -->
	<div class="photo-box"><img :src="cosPrefix + 'three-level/xianglv/xialianfan/zpq.png'" alt="" /></div>

	<div class="people">
		<!-- 地图 -->
		<div class="shop-list">
			<div class="shop">
				<div class="info">
					<div class="content">
						<p>
							仙女山街道位于重庆市武隆区东北部，属于全区功能组团之一，2002年撤销原白果乡、原核桃乡合并成立原仙女山镇，2020年撤销原仙女山镇设立仙女山街道。辖区幅员面积278平方公里，城镇建成区面积16平方公里，辖7个行政村，1个居委会，户籍登记人口15985人，旅游旺季城镇聚集人口30万人以上。辖区拥有仙女山国家森林公园、天生三桥、龙水峡地缝、《爸爸去哪儿》拍摄地石院天坑寨子、大型实景歌会《印象武隆》等自然和人文旅游资源，同时拥有“世界自然遗产”“国家5A级旅游景区”“国家级旅游度假区”三块金字招牌。
						</p>
						<p>
							荆竹村始建于2004年，在原武隆县乡镇、村建制调整中，由原巷口镇荆竹、茶坪、杨柳“三村”合并而成，并划入新成立的仙女山镇。荆竹村位于仙女山街道(2020年仙女山镇升格为街道)西南部，距街道办事处驻地6公里，距武隆城区22公里。全村幅员面积34平方公里，其中耕地9624.9亩，林地、草地等20699.2亩，辖8个村民小组，638户2036人，村党支部下设8个党小组，现有党员69名。海拔高度在800米-1300米之间，全村森林覆盖率60%，全年总降雨量1060毫米左右，无霜期280天，属于高山型丘陵地带，村内有4A级归原景区、临崖线、溶洞、草甸园等丰富旅游资源。
						</p>
					</div>
				</div>
				<img class="cover" :src="cosPrefix + 'two-level/xiangye/i3.jpg?imageMogr2/thumbnail/750x'" />
			</div>
		</div>

		<!-- 人 -->
		<div class="box">
			<div class="people-list">
				<div @click="activeFoodIndex = index" :class="['name-item', { active: activeFoodIndex == index }]" v-for="(item, index) in peopleList" :key="index">
					{{ item.name }}
				</div>
			</div>

			<div class="people-list-item">
				<div class="people-item" v-for="(item, index) in peopleList[activeFoodIndex].list" :key="index">
					<el-image class="cover" :src="item.img" fit="cover" />
					<div class="tag" v-if="item.tag">{{ item.tag }}</div>
					<div class="people-info">
						<div class="title">
							<p>{{ item.name }}</p>
							<span>{{ item.text }}</span>
						</div>
					</div>
					<div class="content">
						<span class="ty-line-1" v-if="activeFoodIndex == 3">{{ item.desc }}</span>
						<!-- <button class="more">了解更多</button> -->
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts" name="People">
import { useBaseStore } from "@/store/base";

const activeFoodIndex = ref(0);

type ListVal = {
	name: string;
	text?: string;
	desc?: string;
	img?: string;
	tag?: string;
};
type List = {
	name?: string;
	list?: ListVal[];
};
type People = List[];

const { cosPrefix } = useBaseStore();

const peopleList: People = [
	{
		name: "仙女山街道",
		list: [
			{
				name: "王霞",
				text: "街道党工委书记",
				desc: `胡蕾女汉族59岁，籍贯重庆，四川农业大学土化专业...`,
				img: cosPrefix + "three-level/xianglv/xialianfan/xiannvshanjiedao/1.1.1.jpg"
			},
			{
				name: "李鹏程",
				text: "街道党工委副书记、主任",
				desc: `重庆市武隆区雲涧电子商务有限公司、重庆市武隆区山...`,
				img: cosPrefix + "three-level/xianglv/xialianfan/xiannvshanjiedao/2.2.jpg"
			},
			{
				name: "郑太春",
				text: "街道党工委委员、人大工委主任（中间）",
				desc: `王万碧在烤烟店工作。2017年归原小镇园区开园试...`,
				img: cosPrefix + "three-level/xianglv/xialianfan/xiannvshanjiedao/3.3.jpg"
			},
			{
				name: "罗世奎",
				text: "街道党工委委员、副书记、武装部部长",
				desc: ``,
				img: cosPrefix + "three-level/xianglv/xialianfan/xiannvshanjiedao/4.4.jpg"
			},
			{
				name: "谭琼",
				text: "街道党工委委员、纪工委书记",
				desc: `冉光芳家庭原从事养蜂和种植烤烟多年，2017年归原...`,
				img: cosPrefix + "three-level/xianglv/xialianfan/xiannvshanjiedao/5.5.jpg"
			},

			{
				name: "梁全",
				text: "街道党工委党工委委员、办事处副主任（左一）",
				desc: `谢永红现年39岁，长期种植烤烟100亩以上，利用荆...`,
				img: cosPrefix + "three-level/xianglv/xialianfan/xiannvshanjiedao/6.6.jpg"
			},
			{
				name: "江洋",
				text: "街道党工委委员、办事处副主任",
				desc: `谢永红现年39岁，长期种植烤烟100亩以上，利用荆...`,
				img: cosPrefix + "three-level/xianglv/xialianfan/xiannvshanjiedao/7.7.jpg"
			},

			{
				name: "彭顺洪",
				text: "街道党工委委员、政法委员（中间）",
				desc: ``,
				img: cosPrefix + "three-level/xianglv/xialianfan/xiannvshanjiedao/8.8.8.jpg"
			},
			{
				name: "黄静",
				text: "街道党工委委员、组织委员（中间）",
				desc: ``,
				img: cosPrefix + "three-level/xianglv/xialianfan/xiannvshanjiedao/9.jpg"
			},
			{
				name: "解勇",
				text: "街道党工委委员、宣传委员、统战委员（中间）",
				desc: ``,
				img: cosPrefix + "three-level/xianglv/xialianfan/xiannvshanjiedao/10.jpg"
			},
			{
				name: "冉建勇",
				text: "街道办事处副主任（中间）",
				desc: ``,
				img: cosPrefix + "three-level/xianglv/xialianfan/xiannvshanjiedao/11.11.jpg"
			},
			{
				name: "冉迎春",
				text: "街道办事处副主任",
				desc: ``,
				img: cosPrefix + "three-level/xianglv/xialianfan/xiannvshanjiedao/12.12.jpg"
			},
			{
				name: "王春迎",
				text: "街道副主任 ",
				desc: ``,
				img: cosPrefix + "three-level/xianglv/xialianfan/xiannvshanjiedao/13.jpg"
			}
		]
	},
	{
		name: "荆竹村",
		list: [
			{
				name: "谌菊",
				text: "荆竹村书记兼主任",
				desc: `胡蕾女汉族59岁，籍贯重庆，四川农业大学土化专业...`,
				img: cosPrefix + "three-level/xianglv/xialianfan/jingzhucun/1.jpg"
			},
			{
				name: "张永江",
				text: "副书记",
				desc: `重庆市武隆区雲涧电子商务有限公司、重庆市武隆区山...`,
				img: cosPrefix + "three-level/xianglv/xialianfan/jingzhucun/2.jpg"
			},
			{
				name: "冉义权",
				text: "副主任兼综合服务专干",
				desc: `冉光芳家庭原从事养蜂和种植烤烟多年，2017年归原...`,
				img: cosPrefix + "three-level/xianglv/xialianfan/jingzhucun/3.jpg"
			},
			{
				name: "陈春梅",
				text: "妇联主席",
				desc: `王万碧在烤烟店工作。2017年归原小镇园区开园试...`,
				img: cosPrefix + "three-level/xianglv/xialianfan/jingzhucun/4.jpg"
			},
			{
				name: "冉小青",
				text: "综合服务专干",
				desc: `谢永红现年39岁，长期种植烤烟100亩以上，利用荆...`,
				img: cosPrefix + "three-level/xianglv/xialianfan/jingzhucun/5.jpg"
			}
		]
	},
	{
		name: "村小组",
		list: [
			{
				name: "杨昌",
				text: "综合治理专干兼杨柳小组长",
				desc: ``,
				img: cosPrefix + "three-level/xianglv/xialianfan/jingzhucun/6.jpg"
			},
			{
				name: "吴孝明",
				text: "荆竹坪小组长",
				desc: `胡蕾女汉族59岁，籍贯重庆，四川农业大学土化专业...`,
				img: cosPrefix + "three-level/xianglv/xialianfan/jingzhucun/7.1.jpg"
			},
			{
				name: "周利露",
				text: "茶坪小组长",
				desc: `重庆市武隆区雲涧电子商务有限公司、重庆市武隆区山...`,
				img: cosPrefix + "three-level/xianglv/xialianfan/jingzhucun/8.1.jpg"
			},
			{
				name: "张文林",
				text: "大水渠小组长",
				desc: `冉光芳家庭原从事养蜂和种植烤烟多年，2017年归原...`,
				img: cosPrefix + "three-level/xianglv/xialianfan/jingzhucun/9.jpg"
			},
			{
				name: "刘小洪",
				text: "红椿坨小组长",
				desc: `王万碧在烤烟店工作。2017年归原小镇园区开园试...`,
				img: cosPrefix + "three-level/xianglv/xialianfan/jingzhucun/10.jpg"
			},
			{
				name: "雷远洪",
				text: "罗家弯小组长",
				desc: `谢永红现年39岁，长期种植烤烟100亩以上，利用荆...`,
				img: cosPrefix + "three-level/xianglv/xialianfan/jingzhucun/11.jpg"
			},
			{
				name: "冉光贵",
				text: "水竹坪小组长",
				desc: ``,
				img: cosPrefix + "three-level/xianglv/xialianfan/jingzhucun/12.jpg"
			},
			{
				name: "刘丹鱼",
				text: "坨田小组长",
				desc: ``,
				img: cosPrefix + "three-level/xianglv/xialianfan/jingzhucun/13.jpg"
			}
		]
	},
	{
		name: "村民",
		list: [
			{
				name: "胡蕾",
				text: "仙女山十美形象代言人",
				desc: `胡蕾女汉族59岁，籍贯重庆，四川农业大学土化专业...`,
				img: cosPrefix + "three-level/xianglv/xialianfan/cunmindaibiao/1.jpg",
				// 新村民、云村民、荣誉村民
				tag: "云村民"
			},
			{
				name: "李成凤",
				text: "仙女山街道返乡创业代言人",
				desc: `重庆市武隆区雲涧电子商务有限公司、重庆市武隆区山...`,
				img: cosPrefix + "three-level/xianglv/xialianfan/cunmindaibiao/2.jpg",
				tag: "新村民"
			},
			{
				name: "冉光芳",
				text: "最美“乡村咖啡师”",
				desc: `种了31年烤烟，她从没想过有一天能成为咖啡师。家中有30亩种植地的她在归原乡村图书馆内专门为往来游客制作咖啡。工作的地方距家只有5分钟车程、
                月薪3000元、每月还有6天假期。其爱人、儿子也在村周边从事旅游相关工作。她说“比起没日没夜地守烤烟赚辛苦钱，现在的日子真是太好了”`,
				img: " https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xianglv/xialianfan/cunmindaibiao/3.jpg",
				tag: "荣誉村民"
			},
			{
				name: "王万碧",
				text: "烤烟大户",
				desc: `王万碧在烤烟店工作。2017年归原小镇园区开园试...`,
				img: cosPrefix + "three-level/xianglv/xialianfan/cunmindaibiao/4.png",
				tag: "荣誉村民"
			},
			{
				name: "谢永红",
				text: "烤烟大户",
				desc: `谢永红现年39岁，长期种植烤烟100亩以上，利用荆...`,
				img: cosPrefix + "three-level/xianglv/xialianfan/cunmindaibiao/5.jpg",
				tag: "荣誉村民"
			},
			{
				name: "范鲁峰",
				text: "重庆方德文化旅游发展有限公司董事长",
				desc: `政协重庆市第六届委员会委员、重庆方德文化旅游发展有限公司董事长，荆竹村“归原小镇”创始人。“归原小镇”通过“田园+乐园+庄园”的规划理念，
                打造了一个集旅游景区+田园综合体+特色小镇+高端品质住宅+美丽乡村建设于一体的全新融合发展示范项目，是中国最具价值田园综合体品牌之一。以“共享、
                共创、共营”理念，建立文、商、旅、居、食、农、养、学8个不同主题方向的社群生活，通过“品学、才艺、兴趣、欢乐、心得、生活方式甚至个人技能及个人
                资源等社群分享，共创归原社群价值体系，达到共营理念。`,
				img: cosPrefix + "three-level/xianglv/xialianfan/cunmindaibiao/6.jpg",
				tag: "荣誉村民"
			},
			{
				name: "刘德权",
				text: "仙女山街道荆竹村红椿坨小组长",
				desc: `刘德权，中共党员，现任仙女山街道荆竹村红椿坨小组长。1976年入伍，1977年入党，四年的军旅生涯使他的性格坚毅，扎实上进。65岁依然坚守在一线，
                无怨无悔地为一方百姓谋发展。他时刻保持共产党员的先进性，发挥模范作用，退伍后于武隆荆竹村安家，在平凡的工作岗位上严谨求实、兢兢业业，
                积极参与荆竹村发展建设，发挥自身党员带头作用，有组织地带领村民参与和发展村务建设。`,
				img: cosPrefix + "three-level/xianglv/xialianfan/cunmindaibiao/7.jpg",
				tag: "荣誉村民"
			},
			{
				name: "刘美华",
				text: "在读博士 土木工程",
				desc: `刘美华 在读博士 土木工程`,
				img: cosPrefix + "three-level/xianglv/xialianfan/cunmindaibiao/8.jpg",
				tag: "荣誉村民"
			}
		]
	}
];
</script>
<style lang="scss" scoped>
.photo-box {
	width: 100%;
	img {
		width: 100%;
	}
}
.shop-list {
	.shop {
		display: flex;
		margin-top: 40px;
		.cover {
			width: 380px;
			height: 428px;
		}
		.info {
			display: flex;
			flex: 1;
			flex-direction: column;
			height: 428px;
			padding-left: 40px;
			.content {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 100%;
				font-size: 16px;
				color: rgb(102 102 102 / 100%);
				text-indent: 2em;
				p {
					margin: 0;
					line-height: 40px;
				}
			}
		}
	}
}
.people {
	padding: 0 320px;
	.box {
		padding: 40px 0;
		.people-list {
			display: flex;
			justify-content: center;
			.name-item {
				padding: 0 20px;
				font-size: 24px;
				border-right: 1px solid #dedede;
				&:last-child {
					border: 0;
				}
				&.active,
				&:hover {
					color: #8a1313;
					cursor: pointer;
				}
			}
		}
		.people-list-item {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 80px;
			.people-item {
				position: relative;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				width: 305px;
				margin-bottom: 40px;
				border: 1px solid #dedede;
				.tag {
					position: absolute;
					top: 0;
					left: 0;
					padding: 5px 15px;
					font-size: 14px;
					color: #ffffff;
					background-color: #8a1313;
				}
				.cover {
					width: 100%;
					height: 183px;
				}
				.people-info {
					display: flex;
					flex: 1;
					padding: 20px;
					.title {
						display: flex;
						align-items: center;
						justify-content: space-between;
						p {
							padding-right: 10px;
							margin: 0;
							font-size: 20px;
							white-space: nowrap;
						}
						span {
							flex: 1;
							width: 180px;
							font-size: 16px;
						}
					}
				}
				.content {
					display: flex;
					justify-content: flex-start;
					padding: 20px;
					padding-top: 0;
					.more {
						width: 64px;
						padding: 0;
						font-size: 16px;
						color: #8a1313;
						white-space: nowrap;
						cursor: pointer;
						background-color: transparent;
						border: 0;
						border-bottom: 1px solid #8a1313;
						outline: none;
					}
				}
			}
		}
	}
}

@media all and (max-width: 750px) {
	.people {
		padding: 16px;
		.box {
			.people-list {
				.name-item {
					font-size: 18px;
				}
			}
			.people-list-item {
				margin-top: 16px !important;
				.people-item {
					width: 47.5% !important;
					.people-info {
						padding: 4px !important;
						.title {
							p {
								font-size: 14px;
							}
							span {
								width: auto;
								font-size: 8px;
							}
						}
					}
					.content {
						padding: 4px;
						span {
							font-size: 8px;
						}
					}
				}
			}
		}
	}
	.shop-list {
		.shop {
			flex-direction: column-reverse;
			margin-top: 0;
			.cover {
				width: 100%;
				height: auto;
			}
			.info {
				height: auto;
				padding: 0;
			}
			.date {
				width: 100%;
			}
		}
	}
}
</style>
